import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon, Grid, Flex, Tag, List } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

const FILTER_MAP = [{
	img: require('../../../assets/home/sidebar_home.png'),
	link: '/',
	text: '首页'
}, {
	img: require('../../../assets/home/sidebar_brand.png'),
	link: '/category?tab=pinpai',
	text: '品牌'
}, {
	img: require('../../../assets/home/sidebar_category.png'),
	link: '/category',
	text: '商品分类'
}, {
	img: require('../../../assets/home/sidebar_buycar.png'),
	text: '购物车',
	callback: (dispatch) => {
		dispatch({
			type: 'meyley/changeHomeTabType',
			payload: 'goods'
		})
	},
}]


class HomeSidebar extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	inputValue: ''
        }
    } 
    onClickNav(filter) {
    	const { dispatch, onClose } = this.props

    	if(filter.link) {
	    	browserHistory.push(filter.link)
    	}
    	if(filter.callback) {
    		filter.callback(dispatch)
    	}
		onClose && onClose()
    }
    onInputChange(e) {
    	this.setState({
    		inputValue: e.target.value
    	})
    }

	render() {
		const { isShowSidebar, onClose } = this.props

		const sidebar = (<List className={styles['home-top-sidebar-list']}>
	      {FILTER_MAP.map((filter, index) => {
	          return (<List.Item key={index}
	          	arrow="horizontal"
	          	className={styles['home-top-sidebar-list-item']}
	            onClick={this.onClickNav.bind(this, filter)}
	          	>
	          		<img style={{marginRight: '0.18rem', width: '0.34rem', height: '0.34rem'}} src={filter.img} />
	          		<span className={styles['home-top-sidebar-list-text']}>{filter.text}</span>
	          	</List.Item>);
	      })}
	    </List>);

	 	return (
 			<div className={styles['home-top-sidebar']}>
 				<div className={styles['home-top-sidebar-wrap']}
 					 style={isShowSidebar ? {left: 0} : null} >
 					<div className={styles['home-top-sidebar-input-wrap']}>
 						<input 
 							placeholder="搜索" 
 							className={styles['home-top-sidebar-input']} 
 							onChange={this.onInputChange}
 							value={this.state.inputValue}
 						/>
 						<div className={styles['home-top-sidebar-input-icon-wrap']} onClick={() => browserHistory.push(`/search?searchKey=${this.state.inputValue}`)}>
 							<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-search']} ${styles['home-top-sidebar-input-icon']}`} style={{fontSize: '0.40rem', color: '#fff', position: 'relative', bottom: '0.06rem'}}/>
 						</div>
 					</div>
 					{sidebar}
 				</div>
 				<div className={styles['home-top-sidebar-mask']}
 					onClick={onClose}
 					style={isShowSidebar ? {display: 'block'} : null}></div>
 			</div>
	  	);
	}
};

HomeSidebar.propTypes = {
};

export default HomeSidebar
